<!-- 登陆界面 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基础设置 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>

    <!-- 样式资源 -->
    <!-- 主样式 -->
    <link rel="stylesheet" href="/static/css/styles.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- 内联样式 -->
    <style>
        .error-message {
            <-- 错误提示红色 -->
            color: #ff3860;
            font-size: 14px;
            <-- 预留错误信息空间 -->
            height: 20px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <!-- Logo 区域 -->
            <div class="logo">
                <img src="/static/images/deepsleep_logo1.png" alt="Logo">
            </div>

            <!-- 登录方式选项卡，现在暂时不需要选项卡，只用 邮箱和密码 登录即可 -->
            <!--
            <div class="login-tabs">
                <span class="tab inactive">验证码登录</span>

                <span class="tab active">密码登录</span>
            </div>
            -->

            <!-- 登录表单 -->
            <form class="login-form" id="loginForm" method="post" action = "/login_process">
                <!-- 错误信息占位区 -->
                <div class="error_message" id="errorMessage"></div>



                <!-- 用户邮箱输入 -->
                <div class="input-group">
                    <input type="text" id="user_mail" placeholder="请输入您的邮箱账号" name="user_mail" required>
                    <label for="user_mail"><i class="fas fa-user"></i></label> <!-- 用户图标 -->
                </div>

                <!-- 密码输入 -->
                <div class="input-group">
                    <input type="password" id="user_password" placeholder="请输入密码" name="user_password" required>
                    <label for="user_password"><i class="fas fa-lock"></i></label> <!-- 锁图标 -->
                    <i class="fas fa-eye toggle-password"></i> <!-- 密码显示切换图标 -->
                </div>

                <!-- 验证码 onclick设置了鼠标点击之后就从/captcha这个路由获取图片之后加上一个随机数让浏览器更新这个图片-->
                <!-- 验证码 -->
                <div class="verification-code">
                    <div class="captcha-container">
                        <!-- 验证码输入框 -->
                        <input type="text" name="captcha" placeholder="输入验证码" id="captcha">

                        <!-- 验证码图片 -->
                        <img src="/captcha?ts=123" id="captcha-img" onclick="reloadCaptcha()">
                    </div>
                </div>


                <!-- 协议声明 -->
                <div class="terms">
                    <small>注册登录即代表已阅读并同意我们的
                        <a href="#">用户协议</a> 与 <a href="#">隐私政策</a>
                    </small>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="login-button">登录</button>
            </form>

            <!-- 辅助链接 -->
            <div class="links">
                <a href="/forget_password" class="forgot-password" style="margin-right: 100px;">忘记密码</a>
                <a href="/register" class="register">立即注册</a>
            </div>
        </div>
    </div>
    <!-- JavaScript 模块 -->
    <script type="module" src="/static/js/login.js"></script>
</body>
</html>